<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Vue 3 用户管理示例</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }

        th {
            background-color: #f4f4f4;
        }
    </style>
</head>
<body>

<div id="app">
    <div v-if="loading">
        <p>加载中...</p>
    </div>
    <div v-else>
        <table>
            <tr>
                <th>用户ID</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>手机号</th>
            </tr>
             
        </table>
    </div>
</div>

<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue@3"></script>
<!-- 引入 Axios -->
<script src="/assets/axios/axios.min.js"></script>
<script setup>
    // 从 Vue 中引入 createApp 和 ref, onMounted
    const {createApp, ref, onMounted} = Vue;

    const app = createApp({
        setup() {
            // 用户数组，初始为空
            const users = ref([]);

            // 加载状态
            const loading = ref(true);

            // 获取用户数据
          

            // 在组件挂载后获取数据
          

            // 返回响应式数据和方法
          
        }
    });
    // 挂载应用
    app.mount('#app');
</script>
</body>
</html>
